/*
 *  TYPOGRAPHY
 *  Global fonts & styles of text
 *
 */

$PxGroteskLight: "PxGrotesk-Light", "Arial", sans-serif;
$PxGroteskLightItalic: "PxGrotesk-LightItalic", "Arial", sans-serif;
$PxGroteskRegular: "PxGrotesk-Regular", "Arial", sans-serif;
$PxGroteskRegularItalic: "PxGrotesk-RegularItalic", "Arial", sans-serif;
$PxGroteskBold: "PxGrotesk-Bold", "Arial", sans-serif;
$PxGroteskBoldItalic: "PxGrotesk-BoldItalic", "Arial", sans-serif;
$Futura: "futura-pt", "Arial Black", "Arial Bold", "Gadget", sans-serif;

@font-face {
  font-family: 'Edo-SZ';
  src:url('/images/Edo-SZ.ttf.woff') format('woff'),
    url('/images/Edo-SZ.ttf.svg#Edo-SZ') format('svg'),
    url('/images/Edo-SZ.ttf.eot'),
    url('/images/Edo-SZ.ttf.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: $PxGroteskRegular;
  color: $nonBlack;
}

a {
  color: inherit;
  text-decoration: none;

  &:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    outline: none;
  }
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  width: 100%;
  margin: 0;
  font-weight: normal;
  font-family: $Futura;
  text-transform: uppercase;
  line-height: 1;
}

p {
  margin: 0;
}

p + p {
  margin-top: 20px;
}






h1, .h1 {
  font-size: 24px;

  @media screen and (min-width: $bp-smaller) {
    font-size: 32px;
  }
  @media screen and (min-width: $bp-medium) {
    font-size: 54px;
  }
  @media screen and (min-width: $bp-larger) {
    font-size: 66px;
  }
}
h2, .h2 {
  font-size: 24px;

  @media screen and (min-width: $bp-smaller) {
    font-size: 26px;
  }
  @media screen and (min-width: $bp-medium) {
    font-size: 40px;
  }
  @media screen and (min-width: $bp-larger) {
    font-size: 50px;
  }
}
h3, .h3 {
  font-size: 24px;

  @media screen and (min-width: $bp-smaller) {
    font-size: 26px;
  }
  @media screen and (min-width: $bp-medium) {
    font-size: 30px;
  }
  @media screen and (min-width: $bp-larger) {
    font-size: 40px;
  }
}
.h3-alt {
  font-size: 20px;

  @media screen and (min-width: $bp-smaller) {
    font-size: 22px;
  }
  @media screen and (min-width: $bp-medium) {
    font-size: 28px;
  }
  @media screen and (min-width: $bp-larger) {
    font-size: 34px;
  }
}
h4, .h4 {
  font-size: 18px;

  @media screen and (min-width: $bp-smaller) {
    font-size: 20px;
  }
  @media screen and (min-width: $bp-medium) {
    font-size: 24px;
  }
  @media screen and (min-width: $bp-larger) {
    font-size: 26px;
  }
}

h5, .h5 {
  font-family: $PxGroteskRegular;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;

  @media screen and (min-width: $bp-smaller) {
    font-size: 14px;
  }
  @media screen and (min-width: $bp-large) {
    font-size: 16px;
  }
}

.h1-alt {
  font-size: 30px;

  @media screen and (min-width: $bp-smaller) {
    font-size: 40px;
  }
  @media screen and (min-width: $bp-medium) {
    font-size: 50px;
  }
  @media screen and (min-width: $bp-larger) {
    font-size: 50px;
  }
}

.h2-alt {
  font-family: $PxGroteskRegular;
  text-transform: none;
	font-size: 24px;
	line-height: 1.33;

  @media screen and (min-width: $bp-medium) {
    font-size: 30px;
  }
}

body,
p, .p,
ul, .ul,
ol, .ol,
.related-posts .blog-post-list-item .title:before { // Special case for related-posts component, need the line height
  font-size: 16px;
  line-height: 26px;

  @media screen and (min-width: $bp-medium) {
    font-size: 18px;
    line-height: 28px;
  }
}

.appleTitle {
  text-transform: lowercase !important;
}

.small-body-copy {
  font-size: 14px;
  line-height: 24px;

  @media screen and (min-width: $bp-medium) {
    font-size: 16px;
    line-height: 26px;
  }
}

.small-print-copy {
  font-size: 12px;
  line-height: 1.5;
}
